<template>
  <div class="search-criteria">
    <BasicSearchCriteria :api="getCollectSourceList" :form-data="formData">
      <!-- 站点分类 -->
      <a-form-item name="siteClassification" class="select-item">
        <!-- <BindingClassificationSelect v-model:newValue="formData.siteClassification" /> -->
        <!--
          <SiteClassificationSelect
          ref="siteClassificationSelect"
          v-model:value="formData.siteClassificationSelectIds"
          @change="siteClassificationSelectChange"
        />
         -->
        <a-cascader
          v-model:value="formData.classData"
          change-on-select
          :options="SOURCE_DATA"
          :field-names="{ label: 'category', value: 'category', children: 'sub_category' }"
          placeholder="全部分类"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          @change="handleChange"
        >
          <template #suffixIcon>
            <a-tooltip placement="top" color="#fff">
              <template #title> 双击选中父级 </template>
              <div class="ellipsis-text">
                <question-circle-outlined />
              </div>
            </a-tooltip>
          </template>
        </a-cascader>
      </a-form-item>

      <!-- 采集状态 -->
      <!-- <a-form-item name="collectState" class="select-item">
        <a-select v-model:value="formData.collectState" :options="NEW_COLLECT_STATE"> </a-select>
      </a-form-item> -->

      <!-- 影片名称 -->
      <a-form-item name="video_name" class="input-item">
        <a-input v-model:value.trim="formData.video_name" placeholder="请输入影片名称关键词"> </a-input>
      </a-form-item>
    </BasicSearchCriteria>
  </div>
</template>

<script lang="ts" setup name="SearchCriteria">
import BasicSearchCriteria from '../../../../components/BasicSearchCriteria.vue'
import SiteClassificationSelect from '../../../../components/site-classification-table/components/SiteClassificationCascader.vue'
import BindingClassificationSelect from '../../../../components/binding-classification/BindingClassificationSelect.vue'
import { RESOURCE_TYPE, CONTENT_TYPE, filterSelectSource } from '@/stores/modules/collect-manage/select-data-source'
import type { SiteClassificationItemType } from '@/stores/modules/collect-manage/select-data-source'
import { ref, reactive, computed, onUnmounted } from 'vue'
import type { CollectManageRequest } from '@/apis/modules/collectManage'
import { getSiteClassification } from '@/stores/modules/collect-manage/select-data-source'
import mitt from '@/utils/mitt'
import apis from '@/apis'
import useStore from '@/stores'
const { collectManage } = useStore()
// api
const { getCollectSourceList, seedCategory } = apis.collectManage
const { id, resource_type, content_type, site_id } = collectManage
console.log('site_id:', site_id)
const _content_type = Number(content_type)
const _site_id = site_id as unknown as string
// form
interface FormDataType extends Omit<CollectManageRequest['collectManager.getCollectSourceList'], 'offset' | 'limit'> {
  siteClassificationSelectIds: number[]
  classData: string[]
}
let formData = reactive<FormDataType>({
  collect_id: '',
  category: '',
  sub_category: '',
  video_name: '',
  siteClassificationSelectIds: [],
  classData: []
})

console.log('formData---------------------: ', formData)
formData.collect_id = id as unknown as string
// 设置到formatFormData 中 { category，sub_category }
// const siteClassificationSelect = ref()
// const siteClassificationSelectChange = (value: string[], selectedOptions: SiteClassificationItemType) => {
//   console.log('siteClassificationSelect.value: ', siteClassificationSelect.value)
//   const arrList = siteClassificationSelect.value.findConformingData(value)
//   console.log('arrList: ', arrList)
//   formData.category = arrList[0]?.id ?? ''
//   formData.sub_category = arrList[1]?.id ?? ''
// }
// const NEW_COLLECT_STATE = computed(() => {
//   let filterValues: number[] = [0, 2, 4, 5, 6, 7]
//   return filterSelectSource(COLLECT_STATE, filterValues)
// })
//级联改变事件
const handleChange = (val: any, options: any) => {
  console.log('val: ', val, options)
  formData.category = val[0]
  formData.sub_category = val[1]
}
// getSiteClassification(_content_type, { site_id: _site_id })
const SOURCE_DATA = ref()
seedCategory({ collect_id: formData.collect_id }).then((res: any) => {
  console.log('res种源分类: ', res)
  SOURCE_DATA.value = res?.list ?? []
})
mitt.on('reset-field', () => {
  formData.category = ''
  formData.sub_category = ''
  formData.siteClassificationSelectIds = []
  formData.classData = []
  console.log('formData.classData: ', formData.classData)
})
onUnmounted(() => {
  mitt.off('reset-field')
})
</script>

<style lang="less" scoped>
.search-criteria {
  .ant-form-inline {
    .ant-form-item {
      margin-right: 10px;
    }
    .select-item,
    .input-item {
      width: 196px;
    }
  }
}
</style>
